<template>
    <div>
        <h2>vuex- demo </h2>
        <h2 @click="changeUsername('daleilei....')">data -  username ===   -- {{count}} -- {{username}}</h2>
        <h2 @click="changeCounter(50)"> counter == {{counter}} --- {{newCount}}</h2>
        <h2 @click="changeCity('遥远的北京....')">city == {{mycity}}</h2>
        <h2>word === {{myword}} --- {{word1}}- {{word2}}  --- {{word}}</h2>
        <h2>money === {{obj.money}}  --- {{obj.list}}</h2>
        <hr>
        <el-button @click="changewordthree('2002-天道酬勤..3')" type="primary" >修改word </el-button>
         <el-button @click="changeObjMoney(2000000000000000000)" type="primary" >修改 money </el-button>
         <el-button @click="changeListAc('List-List-action')" type="primary" >修改 list action</el-button>
         <el-button @click="changeList('List-List-mutation')" type="primary" >修改 list mutation </el-button>
         <el-button @click="changeMvAc" type="primary" >修改 mv async </el-button>

        <el-button @click="sendajax" type="primary" >修改 mv mutation </el-button>

        <p v-for="(m,i) in obj.mv" :key="i">
            {{m.procode}}
        </p>
    </div>
</template>


<script>
import {mapState,mapMutations,mapGetters,mapActions} from "vuex"

export default {
    computed:{
        ...mapState('data',['username','count']),
        ...mapState(['counter','obj']),
        mycity(){
            return this.$store.state.city
        },
        myword(){
            return this.$store.state.word;
        },
        ...mapState({
            word1:state=>state.word,
            word2:'word' // state=>state.word
        }),
        ...mapState(['word']),  // this.word = store.state.word 
        ...mapGetters(['newCount'])
    },
    methods:{
        ...mapMutations('data',['changeUsername']),  // this.changeUsername
        sendajax(){
            this.$axios.post("/vue/getpronamelist")
            .then(res=>{
                if(res.data.type){
                    this.changeMv(res.data.result)  // commit mutations 
                }
            })
        },
        ...mapActions(['changeListAc','changeMvAc']),  // this.changeListAc == this.$store.dispatch 
        changeCity(city){
            console.log(this.$store)
            this.$store.commit("changeCity",city); // 提交mutations type
        },
        ...mapMutations(['changeWord','changeList','changeMv']),
        ...mapMutations({
            changewordtwo:'changeWord'  // this.changewordtwo == this.$store.commit("changeWord")
        }),
        changewordthree(word){
            this.$store.commit("changeWord",word)
        },
        ...mapMutations(['changeCounter','changeObjMoney']) // this.changeCounter
    }
}
</script>
